<template>
    <div id="Verification">
      <navbar title="修改密码"
      />
		<div class="content">
			<div class="content_item1">
				<div class="phone">{{phone}}</div>
				<van-button size="small" type="primary" @click='getmessage()' :disabled='Disable'>{{message}}</van-button>
			</div>
			<div>
				<van-password-input
				  :value="value"
				  gutter="10"
				  :mask="false"
				  :focused="showKeyboard"
				  @focus="showKeyboard = true"
				  @touchstart.native.stop="show = true"
				/>
				<van-number-keyboard
				  v-model="value"
				  :show="show"
				  :maxlength="6"
				  @blur="show = false"
				/>
			</div>
			<van-button type="primary" block @click='gonext()' :disabled="value.length==6?false:true">下一步</van-button>
		</div>
    </div>
</template>
<script>
	import Vue from 'vue';
	import { PasswordInput, NumberKeyboard,Toast } from 'vant';
	
	Vue.use(PasswordInput).use(NumberKeyboard).use(Toast);
  import navbar from "../../components/navbar.vue"
    export default {
		name:'Verification',
        components :{
            navbar 
        },
        data() {
            return {
               phone:'' ,
			   value:'',
			    show: false,
			   showKeyboard: true,
			   message:'发送验证码',
			   Disable:false,
			   Disables:true,
			   
            }
        },
        created() {
            
        },
        mounted() {
			this.phone=this.$route.params.phone
        },
        methods: {
           getmessage(){
			   Toast.loading({
			     message: '发送中...',
			     forbidClick: true,
			   });
			   this.Disable=true
			    this.message=60
			   var clear = setInterval(()=>{
				  this.message--
				  if(this.message==0){
					   window.clearInterval(clear)
					   this.Disable=false
					   this.message='发送验证码'
				  				   
				  }
			   },1000)
			   
		   },
		   gonext(){
			   if(this.value==' '){
				   this.$router.push({
				             name: 'modify',
				             
				           })
			   }else{
				   Toast.fail('短信验证码不正确');
				   this.$router.push({
				             name: 'modify',
				             
				           })
			   }
		   }
		   
        },
        watch: {
        }
    };
</script>
<style lang="scss" scoped>
	.content{
		width: 90%;
		margin: 0 auto;
		.content_item1{
			    font-size: 28px;
			    margin-top: 115px;
			    margin-bottom: 55px;
			    display: flex;
			    justify-content: start;
			    margin-left: 26px;
			    width: 100%;
			    font-weight: 500;
			.van-button--primary{
				background: #FF854D;
				font-size: 12px;
				border-radius: 4px;
				margin-left: 20px;
				border: 1px solid #FF854D;
				width: 85px;
				
			}
		}
		.van-password-input__security li {
			border-radius: 4px;
			border: 1px solid #000;
		}
		.van-button--block {
		    display: block;
		    width: 100%;
		    margin: 40px auto 20px;
		    border-radius: 4px;
		    font-size: 16px;
		    background: #FF854D;
		    border: 1px solid #ff854d;
		}
	}


</style>
